<template>
    <!-- 一级菜单 -->
    <!-- <el-menu-item :index="item.Index" v-for="item in list?.filter(f => f.Childen.length == 0)">
        <el-icon><icon-menu /></el-icon>
        <span>{{ item.MunuName }}</span>
    </el-menu-item> -->
    <!-- 多级菜单 -->
    <!-- 使用递归组件(自己调用自己，结束条件 childen==0) -->
    <!-- <el-sub-menu :index="item.Index" v-for="item in list?.filter(f => f.Childen.length > 0)">
        <template #title>
            <el-icon>
                <location />
            </el-icon>
            <span>{{ item.MunuName }}</span>
        </template>
        <TreeMenu :list="item.Childen"></TreeMenu>
    </el-sub-menu> -->
    <!-- <div v-for="item in list?.sort(s => s.Order)">
        <el-menu-item :index="item.Index" v-if="item.Childen.length == 0">
            <el-icon><icon-menu /></el-icon>
            <span>{{ item.MunuName }}</span>
        </el-menu-item>
        <el-sub-menu :index="item.Index" v-else>
            <template #title>
                <el-icon>
                    <location />
                </el-icon>
                <span>{{ item.MunuName }}</span>
            </template>
            <TreeMenu :list="item.Childen"></TreeMenu>
        </el-sub-menu>
    </div> -->
    <el-menu-item :index="item.Index"
        v-if="item.children == undefined || item.children == null || item.children?.length == 0">
        <el-icon>
            <Memo />
        </el-icon>
        <template #title><span>{{ item.MenuName }}</span></template>
    </el-menu-item>
    <el-sub-menu :index="item.Index" v-else>
        <template #title>
            <el-icon>
                <Promotion />
            </el-icon>
            <span>{{ item.MenuName }}</span>
        </template>
        <TreeMenu v-for="it in item.children" :obj="it" :key="it.Index"></TreeMenu>
    </el-sub-menu>
</template>
<script setup lang="ts">
import { PropType } from 'vue';
import TreeModel from '../class/TreeModel';
//用来接收参数
const props = defineProps({
    // list: Array<TreeModel>
    // 双重断言
    // item:Object as any Ref<TreeModel>
    obj: Object as PropType<TreeModel>
})
const item: TreeModel = props.obj as TreeModel;
</script>